<template>
  <view class="auditPage">
    <view class="form">
      <!-- 默认 -->
      <uni-forms ref="valiForm" :modelValue="form" :border="true">
        <uni-forms-item label="送审意见" name="comment">
          <uni-easyinput
            type="textarea"
            v-model="form.comment"
            placeholder="请输入送审意见"
          />
        </uni-forms-item>
        <uni-forms-item
          label="跳转参数"
          name="variables"
          v-if="variableList.length > 0"
        >
          <radio-group @change="typeChange" class="radio-group">
            <label
              class="radio-item"
              v-for="item in variableList"
              :key="item.value"
            >
              <view>
                <radio
                  :value="item.dictValue"
                  :checked="item.dictValue === currentType"
                />
              </view>
              <view>{{ item.dictLabel }}</view>
            </label>
          </radio-group>
        </uni-forms-item>
      </uni-forms>
      <view class="btns">
        <button class="confirm" @click="submitComplete">确定</button>
        <button class="cancel" @click="cancelComplete">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['taskId', 'variable'],
  data() {
    return {
      form: {
        comment: null,
        variables: null,
      },
      variableList: [],
      currentType: '0',
    }
  },
  created(query) {
    if (this.variable !== null && this.variable !== '') {
      this.$u.api.getDicts(this.variable).then((res) => {
        if (res.code == '200') {
          this.variableList = res.data
          this.currentType = '0'
          this.form.variables = '0'
        }
      })
    }
  },
  methods: {
    typeChange(val) {
      for (let i = 0; i < this.variableList.length; i++) {
        if (this.variableList[i].dictValue === val.detail.value) {
          this.currentType = i
          this.form.variables = val.detail.value
          break
        }
      }
    },
    cancelComplete() {
      this.$emit('close')
    },
    submitComplete() {
      // console.log(this.form, 'form')
      if (this.form.variables) {
        const data = {
          taskId: this.taskId,
          comment: this.form.comment,
          variables: {
            [this.variable]: Number(this.form.variables),
          },
        }
        // console.log(data, 'data')
        this.$u.api.completeBusinessOrder(data).then((res) => {
          if (res.code == '200') {
            this.$u.toast('送审成功')
            this.$emit('close')
          }
        })
      } else {
        const data = {
          taskId: this.taskId,
          comment: this.form.comment,
        }
        // console.log(data, 'data')
        this.$u.api.completeBusinessOrder(data).then((res) => {
          if (res.code == '200') {
            this.$u.toast('送审成功')
            this.$emit('close')
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/ .uni-input-placeholder {
  font-size: 14px;
  color: #6a6a6a !important;
}

/deep/ .is-disabled {
  //修改禁用的是输入框背景
  background-color: #f5f7fa !important;
}

/deep/ .uni-select--disabled {
  //下拉框禁用下文字颜色
  .uni-select__input-text {
    color: #d5d5d5;
  }
}

/deep/ .uni-data-tree {
  .uni-data-tree-input {
    .input-value {
      .selected-area {
        .uni-scroll-view {
          width: 300rpx !important;
        }
      }
    }
  }
}

/deep/ .uni-forms-item__label {
  //label宽度
  width: 110px;
}

/deep/ .is-input-error-border {
  //文本框校验时 边框颜色和占位符不变红色
  border-color: #dcdfe6 !important;

  .uni-easyinput__placeholder-class {
    color: #6a6a6a;
  }
}

/deep/ .uni-easyinput__placeholder-class {
  color: #6a6a6a;
}

/deep/ .uni-numbox {
  margin-top: 5px;
}

/deep/ .uni-forms-item--border {
  padding: 10px 16px; //表单item左右间距
}

.auditPage {
  .form {
    font-size: 28rpx;
    width: 100%;
    padding: 10rpx 0rpx;

    .processSelect {
      display: flex;
      align-items: center;
      font-size: 12px;
      height: 35px;
      padding-left: 10px;
      width: 100%;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      color: #6a6a6a;

      .selected {
        font-size: 14px;
        color: #333333;
      }
    }

    .textBox {
      position: relative;

      .wordLimit {
        position: absolute;
        bottom: 5rpx;
        right: 10rpx;
        font-size: 10px;
        color: #6a6a6a;
      }
    }

    .radio-group {
      display: flex;

      .radio-item {
        display: flex;
        margin-right: 10rpx;
      }
    }
    .btns {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-around;
      .confirm,
      .cancel {
        width: 160rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 8rpx;
        font-size: 32rpx;
      }

      .confirm {
        color: #ffffff;
        background: #007aff;
      }

      .cancel {
        color: #007aff;
        background-color: #ffffff;
        border: 2rpx solid #007aff;
      }
    }
  }
}
</style>